<template>
  <div class="permission-management">
    <!-- 查询表单 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="权限名称">
          <el-input v-model="searchForm.name" placeholder="请输入权限名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch(searchForm.name)">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="showDialog('add')">新增权限</el-button>
    </div>

    <!-- 权限列表 -->
    <el-table :data="permissionList" border style="width: 100%">
      <el-table-column prop="name" label="权限名称" />
      <el-table-column prop="code" label="权限码" />
      <el-table-column prop="url" label="路径" />
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button size="small" @click="showDetail(row)">查看详细</el-button>
          <el-button size="small" type="primary" @click="showDialog('edit', row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      @closed="resetForm"
    >
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="权限码" prop="code">
          <el-input v-model="formData.code" placeholder="请输入权限码" />
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="formData.url" placeholder="请输入路径" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="权限详情"
      width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ currentPermission.id }}</el-descriptions-item>
        <el-descriptions-item label="权限名称">{{ currentPermission.name }}</el-descriptions-item>
        <el-descriptions-item label="权限码">{{ currentPermission.code }}</el-descriptions-item>
        <el-descriptions-item label="路径">{{ currentPermission.url || '无' }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ currentPermission.createdBy }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ currentPermission.updatedBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatTime(currentPermission.createdTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatTime(currentPermission.updatedTime) }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { AclApi } from '@/api/acl'


// 查询表单
const searchForm = reactive({
  name: ''
})


// 权限列表
const permissionList = ref([])

// 对话框相关
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const dialogType = ref('add') // 'add' or 'edit'
const dialogTitle = computed(() => dialogType.value === 'add' ? '新增权限' : '编辑权限')

// 表单数据
const formData = reactive({
  id: '',
  name: '',
  code: '',
  url: ''
})

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入权限码', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ]
})

// 当前查看的权限详情
const currentPermission = ref({})

// 表单引用
const formRef = ref(null)

// 查询
const handleSearch = async(name) => {
    const res = await AclApi.queryAcl(name)
    permissionList.value = res.data

}

// 重置查询
const resetSearch = () => {
  searchForm.name = ''
  handleSearch()
}

// 显示对话框
const showDialog = (type, row) => {
  dialogType.value = type
  if (type === 'edit' && row) {
    Object.assign(formData, row)
  }
  dialogVisible.value = true
}

// 显示详情
const showDetail = (row) => {
  currentPermission.value = { ...row }
  detailDialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
    await formRef.value.validate()
    
    if (dialogType.value === 'add') {
      await AclApi.createAcl(formData)
      ElMessage.success('新增权限成功')
    } else {
      await AclApi.updateAcl(formData)
      ElMessage.success('更新权限成功')
    }
    
    dialogVisible.value = false
    handleSearch()
  }

// 删除权限
const handleDelete = (id) => {
  ElMessageBox.confirm('确认删除该权限吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
      await AclApi.deleteAcl(id)
      ElMessage.success('删除成功')
      handleSearch()
  }).catch(() => {})
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  formData.id = ''
  formData.name=''
  formData.code=''
  formData.url = ''
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString()
}

// 初始化加载
onMounted(() => {
    handleSearch()
})
</script>

<style scoped>
.permission-management {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>